<template>
    <el-dialog
            v-model="visible"
            title="商品详情"
            :width="['768px', '90%']"
            :before-close="handleClose"
    >
        <el-descriptions column="1" border>
            <el-descriptions-item label="商品名称" :contentStyle="{fontWeight: 'bold'}">
                {{ productData.name }}
            </el-descriptions-item>

            <el-descriptions-item label="原价">
                ¥{{ productData.priceBefore }}
            </el-descriptions-item>

            <el-descriptions-item label="现价">
                <span style="color: #ff4d4f; font-weight: bold">¥{{ productData.priceAfter }}</span>
            </el-descriptions-item>

            <el-descriptions-item label="库存数量">
                {{ productData.count }}
            </el-descriptions-item>

            <el-descriptions-item label="已售数量">
                {{ productData.buyed }}
            </el-descriptions-item>

            <el-descriptions-item label="商品状态">
                <el-tag
                        :type="productData.status === '正常' ? 'success' : 'danger'"
                        size="small"
                >
                    {{ productData.status }}
                </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="规格信息">
                <el-card v-for="spec in productData.specs" :key="spec.id" style="margin-bottom: 10px;">
                    <div slot="header" style="font-weight: bold;">
                        {{ spec.specName }}
                    </div>
                    <div style="padding: 10px 0;">
                        <el-tag
                                v-for="(value, index) in spec.values"
                                :key="index"
                                style="margin-right: 8px; margin-bottom: 8px;"
                                effect="plain"
                        >
                            {{ value.value }}
                        </el-tag>
                    </div>
                </el-card>
            </el-descriptions-item>
        </el-descriptions>

        <template #footer>
            <el-button @click="handleClose">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制弹窗显示状态
const visible = ref(false);
// 商品详情数据
const productData = ref({
    name: '',
    priceBefore: 0,
    priceAfter: 0,
    count: 0,
    buyed: 0,
    status: '',
    specs: []
});

// 接收父组件传递的商品数据并显示弹窗
const handleDetailData = (data: any) => {
    productData.value = { ...data };
    visible.value = true;
};

// 关闭弹窗
const handleClose = () => {
    visible.value = false;
    // 清空数据，避免下次打开时显示旧数据
    productData.value = {
        name: '',
        priceBefore: 0,
        priceAfter: 0,
        count: 0,
        buyed: 0,
        status: '',
        specs: []
    };
};

// 暴露方法给父组件调用
defineExpose({
    handleDetailData
});
</script>

<style scoped>
::v-deep .el-dialog__body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px;
}

::v-deep .el-descriptions__body {
    padding-top: 10px;
}

::v-deep .el-descriptions-item__label {
    font-weight: 500;
}
</style>
